<%@ page import="com.szyjjk.entity.User" %>
<%@ page import="com.szyjjk.entity.UserBo" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>重点水库水生态智慧管理平台</title>
    <!-- 引入Element -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="${contextPath}/css/ElementCss/theme/index.css">
    <link rel="stylesheet" href="${contextPath}/css/home.css"/>
    <link rel="stylesheet" href="${contextPath}/css/head.css"/>
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<body>

<div id="main" class="all" v-cloak>
    <el-container class="all">
        <el-header class="head">
            <!-- 上方菜单栏 -->
            <div class="headTitle">  {{$t('headJs.title')}} </div><!-- 系统名 -->
            <div v-for="(menu,index) in menuTitle" class="imgMenu" @click="meSwitch(index)" v-show="!(index == 0 || index == 3)"
                 v-bind:class="{imgMenuClick: topNum== index}" >
                <img v-bind:src="menu.url"/><br/>
                <%--{{menu.title}}--%>
                {{$t(menu.title)}}
            </div>
            <div class="blockCirc" @click="showHead()">
                <span style="font-size: 15px;"> {{$t('headJs.sign_out')}} </span>
            </div>
            <div class="blockCirc">
                <%
                    HttpSession session1 = request.getSession(false); // 使用false来避免创建新的session如果当前没有session
                    if (session1 != null) {
                        UserBo user = (UserBo) session1.getAttribute("userinfo");
                        if (user != null) {
                            out.println("欢迎, " + user.getUserName()+" 用户"); // 显示用户名
                            // 你可以根据需要访问其他用户信息
                        } else {
                            out.println("用户未登录");
                        }
                    } else {
                        out.println("会话已过期或用户未登录");
                    }
                %>
                <div id="usertype" style="display: none">
                    <%
                        HttpSession session2 = request.getSession(false); // 使用false来避免创建新的session如果当前没有session
                        if (session2 != null) {
                            UserBo user = (UserBo) session2.getAttribute("userinfo");
                            if (user != null) {
                                out.println(user.getUsertype()); // 显示用户名
                                // 你可以根据需要访问其他用户信息
                            } else {
                                out.println("用户未登录");
                            }
                        } else {
                            out.println("会话已过期或用户未登录");
                        }
                    %>
                </div>
            </div>
            <div class="blockCirc">
                <el-dropdown @command="changeLanguages">
                  <span class="el-dropdown-link switchLanguage">
                    {{$t('headJs.changeTitle')}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item  command="zh">中文</el-dropdown-item>
                        <el-dropdown-item  command="en">English</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>

        </el-header>

        <el-main class="nomagin">
            <iframe id="mainIframe" class="iframe" src="homeWarning.do" frameborder="no" scrolling="no"
                    allowtransparency="yes"></iframe>

        </el-main>
    </el-container>
    <el-dialog title="个人资料	" :visible.sync="HeadVisible">

        这里是头像

    </el-dialog>
    <div class="loading" onclick="toggleLoading()">
        <div class="loading-img" >
            <img src="../img/home/headLoading.png"/>
        </div>
    </div>

</div>


</body>
<script src="${contextPath}/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="${contextPath}/js/elementIndex.js"></script>

<%--语言库--%>
<script src="${contextPath}/js/language/languages.js"></script>
<%--语言js--%>
<script src="${contextPath}/js/language/vue-i18n.js"></script>
<%--公共方法--%>
<script src="${contextPath}/js/homeJS/publicTool.js"></script>


<script>

    const i18n = new VueI18n({
        locale: 'zh', // 设置默认
        messages
    });

    function toggleLoading() {
        document.getElementsByClassName('loading')[0].classList.toggle('loading-none');
    }
    //关闭加载条
    function  closeLoading(){
        document.getElementsByClassName('loading')[0].classList.add('loading-none');
    }
    //打开加载条
    function openLoading(){
        document.getElementsByClassName('loading')[0].classList.remove('loading-none');
    }

    var em = new Vue({
        el: main,
        i18n,
        data: {
            title: '重点水库水生态智慧管理平台',
            topNum: 4, //用来判断上方菜单的样式，选取0位第一个
            circleUrl: '${contextPath}/img/home/defaultAvatar.png', //头像图片地址
            menuTitle: null,
            HeadVisible: false,
            languageType:"zh"
        },
        created() {
            //初始化语言
            this.languageType=this.common.Initial();
            this.$i18n.locale = this.common.Initial();
            var usertype = document.getElementById("usertype");
            console.log(usertype.textContent)
            if(usertype.textContent.includes("管理员")){
               this.menuTitle = [
                    { //构建的顶部菜单选项
                        title: "headJs.baseData",//基础数据查询
                        url: "${contextPath}/img/home/queryData.png"
                    },
                    {
                        title: "headJs.hardWare",//浮标数据
                        url: "${contextPath}/img/home/guance.png"
                    },
                    {
                        title: "headJs.Monitoring",//系统监控
                        url: "${contextPath}/img/home/monitoring.png"
                    },
                    {
                        title: "headJs.ResultData",//成果数据展示
                        url: "${contextPath}/img/home/resultshow.png"
                    }, {
                    title: "headJs.Warning",//预警辅助
                    url: "${contextPath}/img/home/warning.png"
                }, {
                    title: "headJs.System",
                    url: "${contextPath}/img/home/systemSettings.png"
                }
                ]
            }else{
                this.menuTitle = [
                    { //构建的顶部菜单选项
                        title: "headJs.baseData",//基础数据查询
                        url: "${contextPath}/img/home/queryData.png"
                    },
                    {
                        title: "headJs.hardWare",//浮标数据
                        url: "${contextPath}/img/home/guance.png"
                    },

                    {
                        title: "headJs.ResultData",//成果数据展示
                        url: "${contextPath}/img/home/resultshow.png"
                    }, {
                    title: "headJs.Warning",//预警辅助
                    url: "${contextPath}/img/home/warning.png"
                }]
            }


            // if(this.languageType=="en"){
            //     document.getElementById("mainIframe").src = "homebaseDataEn.do";
            // }else if (this.languageType=="zh"){
            //     document.getElementById("mainIframe").src = "homebaseData.do";
            // }
        },
        methods: { //事件
            changeLanguages(language){
                // console.log(language);
                this.languageType=language
                this.common.Initial(language);
                this.$i18n.locale=language;
                // toggleLoading();
                this.meSwitch(this.topNum);
                // document.getElementById('mainIframe').contentWindow.location.reload();
            },
            meSwitch(index) { //上方菜单栏切换事件
                this.topNum = index;
                toggleLoading();
                switch (index) {
                    case 0: //基础数据查询  这个需要切换 因为没法用18nc
                        if(this.languageType=="en"){
                            document.getElementById("mainIframe").src = "homebaseDataEn.do";
                        }else if (this.languageType=="zh"){
                            document.getElementById("mainIframe").src = "homebaseData.do";
                        }
                        break;
                    case 1: //浮标数据
                        document.getElementById("mainIframe").src = "hardWare.do";
                        break;
                    case 2: //   系统监控
                        document.getElementById("mainIframe").src = "homeMonitoring.do";
                        break;
                    case 3: //

                        document.getElementById("mainIframe").src = "homeResultData.do";//（成果数据展示）
                        break;
                    case 4: //预警辅助
                        document.getElementById("mainIframe").src = "homeWarning.do";//（成果数据展示）
                        break;
                    case 5: //
                        document.getElementById("mainIframe").src = "homeSystem.do";//(系统设置)

                        break;
                    // case 5: //
                    //     break;
                    // case 6: //
                    //     document.getElementById("mainIframe").src = "../typhoon/typhoonMap.do";//(台风数据)
                    // document.getElementById("mainIframe").src = "homeRealTime.do";（实时分析）
                    //     break;
                }
            }, showHead() {
                window.location.href = "../loginOut.do";
            }
        }
    });
</script>
</html>
